<template>
  
  <div id="app">
    
    <transition name="fade" mode="out-in">
      <keep-alive :max="10" include="Order,Mine"> 
        <component :is="coms[currentIndex]" />
      </keep-alive>
    </transition>
    <div class="tabbar">
      <span :class="{active: currentIndex == index }" v-for="(item,index) in btns" :key="index" @click="currentIndex=index">{{item}}</span>
    </div>

  </div>
</template>

<script>
// import axios from 'axios'
import Home from './components/Home.vue'
import Bao from './components/Bao.vue'
import Order from './components/Order.vue'
import Mine from './components/Mine.vue'

export default {
  data(){
    return {
      currentIndex:0,
      btns:['首页','爆爆团','订单','我的'],
      coms:['Home','Bao','Order','Mine'],
      // shoplist:[]
    }
  },
    // mounted(){
    //     axios.get('/api/shop/list').then((res)=>{
    //     this.shoplist = res.data.list; 
    // })
    // },
  components:{
  Home,
  Bao,
  Order,
  Mine
  }
}

</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
}
.tabbar{
  display: flex;
  justify-content: space-around;
  align-content: center;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  width: 90%;
  box-sizing: border-box;
  border-top: 1px solid #ccc;
}
.tabbar .active{
  color: lightskyblue;
}
.list .shop{
  display: flex;
  margin: 10px;
}
.name{
  width: 100%;
}
.list .shop .imgbox{
  width: 60px;
  margin-right: 10px;
}
.list .shop .imgbox img{
  width: 100%;
}
</style>
